<!-- 选择地址 -->
<template>
	<view class="choose-address-container" v-show="visible">
		<view class="content-panel" :class="{'show': isShow}">
			<view class="header">
				<text class="title">选择地址</text>
				<button class="close-btn iconfont" @click="handleClose()">&#xe60d;</button>
			</view>
			<view class="body">
				<!-- 暂无数据 -->
				<c-empty-data v-if="!addressList.length" empty-text="你还没添加地址哦~"></c-empty-data>
				<!-- 地址列表 -->
				<view v-else class="list">
					<view class="list-item" v-for="item in addressList" :key="item.id"
						:class="{'active': item.id == chooseAddress.id}" @click="handleChangeAddress(item)">
						<text class="local-icon iconfont">&#xe610;</text>
						<view class="list-item-header">
							<text class="text">{{item.name}}</text>
							<text class="text">{{item.phone}}</text>
							<text class="text" v-if="item.is_default">[默认]</text>
						</view>
						<view class="list-item-body">
							<text class="text">{{item.region_name}}{{item.address}}</text>
						</view>
					</view>
				</view>
			</view>
			<view class="footer" :style="[paddingBottomStyle]">
				<button class="add-btn" @click="handleNavToAddressManagePage()">管理地址</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import api from "@/api/index.js";
	import { ref, watch } from 'vue';
	import { storeToRefs } from 'pinia';
	import { useSubmitOrderStore } from '../store.js';

	const paddingBottomStyle = {
		'paddingBottom': getApp().globalData.safeAreaBottom > 0 ?
			getApp().globalData.safeAreaBottom + 'px' : '40rpx'
	};

	const emits = defineEmits('update:visible');
	const visible = defineModel('visible', {
		type: Boolean,
		default: false,
	});
	const isShow = ref(false);
	const store = useSubmitOrderStore();
	const { addressList, chooseAddress } = storeToRefs(store);

	watch(visible, (value) => {
		if (value) {
			setTimeout(() => {
				isShow.value = true;
			}, 30);
		}
	});

	// 选择其它地址
	const handleChangeAddress = (row) => {
		store.SET_CHOOSE_ADDRESS(row);
		handleClose();
	}

	// 页面跳转到地址管理
	const handleNavToAddressManagePage = () => {
		uni.navigateTo({
			url: '/pagesC-shopping/address-manage/index'
		});
		handleClose();
	}

	// 关闭
	const handleClose = () => {
		isShow.value = false;
		setTimeout(() => {
			emits('update:visible', false);
		}, 200);
	}
</script>

<style lang="less" scoped>
	@redColor: #FE3333;

	.choose-address-container {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 10;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);

		.content-panel {
			display: flex;
			flex-direction: column;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 70%;
			background-color: white;
			transform: translateY(100%);
			transition: transform 0.2s;

			&.show {
				transform: translateY(0);
			}
		}

		.header {
			flex-shrink: 0;
			position: relative;
			width: 100%;
			height: 80rpx;
			text-align: center;
			line-height: 80rpx;

			.title {
				font-size: 28rpx;
				font-weight: bold;
			}

			.close-btn {
				position: absolute;
				top: 50%;
				right: 36rpx;
				transform: translateY(-50%);
				font-size: 30rpx;
				color: #888;
				background-color: transparent;
			}
		}

		.body {
			flex-grow: 1;
			width: 100%;
			height: 0;
			overflow-y: auto;

			.list {
				&-item {
					position: relative;
					display: flex;
					flex-direction: column;
					justify-content: center;
					height: 120rpx;
					padding: 0 100rpx 0 80rpx;
					box-sizing: border-box;
					border-bottom: 2rpx solid #fafafa;
					transition: backgroundColor 0.2s;

					&:active {
						background-color: #fafafa;
					}

					.local-icon {
						position: absolute;
						top: 50%;
						left: 30rpx;
						transform: translateY(-50%);
						font-size: 30rpx;
						color: #888;
					}

					&-header {
						.text {
							font-size: 28rpx;
							color: #888;
							font-weight: bold;

							&:last-child {
								margin-left: 20rpx;
							}
						}
					}

					&-body {
						margin-top: 10rpx;

						.text {
							display: block;
							font-size: 28rpx;
							color: #888;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					&.active {
						&::after {
							position: absolute;
							top: 50%;
							right: 30rpx;
							transform: translateY(-50%);
							display: block;
							content: '\e62b';
							font-family: 'iconfont';
							font-size: 20rpx;
							color: @redColor;
						}

						.local-icon {
							color: @redColor;
						}

						.list-item-header {
							.text {
								color: @redColor;
							}
						}

						.list-item-body {
							.text {
								color: @redColor;
							}
						}
					}
				}
			}
		}

		.footer {
			flex-shrink: 0;
			width: 100%;
			height: auto;
			padding: 30rpx 30rpx 0 30rpx;
			box-sizing: border-box;

			.add-btn {
				width: 100%;
				height: 88rpx;
				font-size: 28rpx;
				color: white;
				text-align: center;
				line-height: 88rpx;
				border-radius: 44rpx;
				background-color: @redColor;
				transition: transform 0.2s;

				&:active {
					transform: scale(0.95);
				}
			}
		}
	}
</style>